<template>
  <div class="list-wapper">
    <div class="query__top">

      <el-row :gutter="20" class="button-content">
        <!-- <el-col :span="6"/> -->
        <el-col :span="6">
          <el-button size="small" type="primary" @click="handleAddReward">
            <span>新增奖励</span>
          </el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="loading" :data="list" size="small" style="width: 100%">
      <el-table-column prop="days" label="累积签到天数" width="150"/>
      <el-table-column prop="type" label="获得奖励">
        <template slot-scope="{row}">
          <span>{{ row.type | formatRechageStatus }}:{{ row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <span class="arrow-text" @click="changeSort(scope.$index, scope.$index - 1)"><i class="el-icon-caret-top" /></span>
          <span class="arrow-text mr" @click="changeSort(scope.$index, scope.$index + 1)"><i class="el-icon-caret-bottom"/></span>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="handleUpdateReward(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="totalCount && totalCount > 0" class="list-pagaps">
      <el-pagination
        :current-page="query.pageIndex || 1"
        :page-sizes="PageSizeArr"
        :page-size="pageOffset"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      <div/>
    </div>

    <SignRewardDialog
      v-if="signRewardDialogShow"
      :source-data="activeData"
      :open-type="activeType"
      @success="_loadData"
      @close="singRewardDialogClose"
    />
  </div>

</template>
<script>
import { cloneDeep } from 'lodash'
import ErrorView from '@/components/ErrorView/index'
import LoadingView from '@/components/LoadingView/index'
import AsyncSwitch from '@/components/AsyncSwitch/index'
import { RECHARGE_STATUS, PAGE_SIZE_ARR } from '@/common/dictory'
import { getSignRewardList, signRewardDelete, signRewardSort } from '@/api/sign-reward'
import { parseTime } from '@/utils'
import SignRewardDialog from './_partials/sing-reward-dialog'
const QueryInitValue = {
  pageIndex: 1
}
export default {
  name: 'SignRewardManage',
  components: { ErrorView, LoadingView, AsyncSwitch, SignRewardDialog },
  filters: {
    formatTimeByTimeS(timeStr) {
      return parseTime(new Date(timeStr), '{y}/{m}/{d} {h}:{i}:{s}')
    },
    formatRechageStatus(type) {
      var typeNode = RECHARGE_STATUS.find(item => item.value === type) || {}
      return typeNode['label'] || ''
    }
  },
  data() {
    return {
      list: [],
      loading: true,
      loadFailed: false,
      query: cloneDeep(QueryInitValue),
      totalCount: 0,
      pageOffset: 10,
      timeLimit: [],
      signRewardDialogShow: false,
      activeType: 'create',
      activeData: {}
    }
  },
  computed: {
    PageSizeArr() {
      return cloneDeep(PAGE_SIZE_ARR || [10, 20, 30, 40])
    }
  },
  created() {
    this._loadData()
  },
  methods: {
    handleSizeChange(pageOffset = 10) {
      this.query.pageIndex = 1
      this.pageOffset = pageOffset
      this._loadData()
    },
    handleCurrentChange(pageIndex = 1) {
      this.query.pageIndex = pageIndex
      this._loadData()
    },
    handleAddReward() {
      this.activeType = 'create'
      this.activeData = {}
      this.signRewardDialogShow = true
    },
    handleUpdateReward(data) {
      this.activeType = 'update'
      this.activeData = data
      this.signRewardDialogShow = true
    },
    handleDelete({ id = '' }) {
      this.$confirm('删除当前签到奖励方式', '签到奖励管理', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        signRewardDelete({ id }, '操作失败').then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this._loadData()
        }).catch(msg => {
          this.$message({
            type: 'error',
            message: msg
          })
        })
      }).catch(() => {

      })
    },
    singRewardDialogClose() {
      this.activeType = 'create'
      this.activeData = {}
      this.signRewardDialogShow = false
    },
    changeSort(index, sortIndex) {
      var { list = [] } = this
      var currentItem = list[index]
      var sortItem = list[sortIndex] || currentItem
      signRewardSort({ id: currentItem.id || '', toId: sortItem.id || '' }, '操作失败').then(() => {
        this._loadData()
      }).catch(msg => {
        this.$message({
          type: 'error',
          message: msg
        })
      })
    },
    _loadData() {
      var { pageOffset = 10 } = this
      this.loading = true
      this.loadFailed = false
      this.list = []
      getSignRewardList({
        ...this.query,
        pageOffset
      }).then(({ signInList: rows = [], pageInfo = {}}) => {
        var {
          totalCount = 0
        } = pageInfo || {}
        this.totalCount = totalCount
        this.loading = false
        this.loadFailed = false
        this.list = rows
      }).catch(() => {
        this.loading = false
        this.loadFailed = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import url('~@styles/btn.scss');
.list-wapper {
  padding: 20px;
}
.query__top {
  padding-bottom: 20px;
}
.query-input {
  width: calc(100% - 100px);
}
.button-content {
  margin-top: 20px;
}
.query__right-content {
  text-align: right;
}
.list-pagaps{
    text-align: right;
    padding-top:20px;
}
.query__label{
    font-weight: 600;
}
.mt-20{
  margin-top:20px;
}
.arrow-text{
  font-size:18px;
  cursor: pointer;
}
.arrow-text.mr{
  margin-right:10px;
}
</style>

